<template>
<div>
    <h1>人员列表</h1>
    <!--列表人员-->
    <ul>
        <li v-for="p in personList" :key="p.id">
            {{ p.name }}
        </li>
    </ul>
    <!--输入框,-->
    <input type="text" placeholder="请输入需要添加的人的姓名" v-model="name">
    <button @click="addPerson">点击添加人员</button>
    <button @click=addPersonOdd>人员为奇数时才能添加</button>
    <button @click=deletePersonWait>500ms后删除列表的第一个人</button>
</div>
</template>
<script>
export default{
    data(){
        return{
            name:'',
        }
    },
    computed:{
        personList(){
            //这里就不是直接就是state了，要说明具体是哪一个模块的元素
            return this.$store.state.PersonAbout.personList //获取人员列表
        }
    },
    methods:{
        addPerson(){
            this.$store.commit('PersonAbout/add',this.name)
            //清空输入框
            this.name=''
        },
        addPersonOdd(){
            this.$store.dispatch('PersonAbout/addOdd',this.name)
        },
        deletePersonWait(){
            this.$store.dispatch('PersonAbout/deleteWait')
        }
   }
}
</script>
